<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <style>
        h1 {
            color: blue;
        }
    </style> -->
    <!-- <link rel="stylesheet" href="./css.css"> -->
    <style>
        /* div {
            color: red;
        } */
        /* .d {
            color: red;
        } */
        #d {
            color: red;
        }
    </style>
</head>

<body>
    <!-- <h1 style="color: blue;">这是一个一级标签</h1> -->


    <!-- <div>
        <h1>这是一个1级标签</h1>
    </div>
    <div>
        <p>这是一个段</p>
    </div>
    <div><span>这是一个span</span></div>
    <div><span>
            <h1>这是一个h1</h1>
        </span></div>
    <div>
        <p><a href="#">百度一下</a></p>
    </div> -->

<!-- 
    <div class="d">
        <h1>这是一个1级标签</h1>
    </div>
    <div class="d">
        <p>这是一个段</p>
    </div>
    <div class="d"><span>这是一个span</span></div>
    <div class="d"><span>
            <h1>这是一个h1</h1>
        </span></div>
    <div class="d">
        <p><a href="#">百度一下</a></p>
    </div> -->

    <!-- <div id="d">
        <h1>这是一个1级标签</h1>
    </div>
    <div id="d">
        <p>这是一个段</p>
    </div>
    <div id="d"><span>这是一个span</span></div>
    <div id="d"><span>
            <h1>这是一个h1</h1>
        </span></div>
    <div id="d">
        <p><a href="#">百度一下</a></p>
    </div> -->

<!-- 
    无论是标签选择器、class 选择器还是 id 选择器（尽管你这里 id 使用不规范），它们的作用范围本质是选中匹配的元素，然后将样式应用到该元素上。而内层元素之所以会继承某些样式（比如 color），是因为这些样式具有继承性，并非选择器 “穿透” 到了内层。
例如 color 属性具有继承性，所以父元素设置 color 后，子元素会继承该值；但如果是 border 这样的非继承属性，即使父元素设置了，子元素也不会继承。
a 标签默认有自己的样式（通常是蓝色下划线），这是浏览器的默认样式表导致的，并非选择器对 a 标签 “无效”。如果想让 a 标签继承父元素的 color，可以专门设置 a { color: inherit; }
总结：你的测试中关于 “选择器对内层元素的影响” 本质是样式继承问题，而非选择器本身的作用范围问题，且多个元素使用相同 id 是不符合 HTML 规范的。 -->

<!-- 可以这样理解，但更准确的说法是：选择器仅作用于它所匹配的元素本身，而子元素之所以表现出某些样式，是因为部分 CSS 属性具
 有 “继承性”，而非选择器 “穿透” 到了子元素。 -->

 <!-- 这些对于复合选择器通配符选择器也是一样的吧
是的，无论是复合选择器（如后代选择器、子选择器、相邻兄弟选择器等）还是通配符选择器（*），
核心逻辑都是一致的：选择器只作用于它精确匹配的元素，子元素的样式表现依然由 “CSS 属性继承性” 
或 “是否被其他选择器直接匹配” 决定，而非选择器本身的 “穿透性”。 -->
</body>

</html>